<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Go WebAssembly</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="assets/weui.css">
	<link rel="stylesheet" href="assets/app.css">
</head>

<body>

	<div id="app" class="page">
		<div class="page__bd">
			<div class="weui-panel">
				<div class="weui-panel__hd">Go调用小程序的函数</div>
				<div class="weui-panel__bd">
					<div class="weui-media-box">
						<div v-text="notice"></div>
					</div>
				</div>
			</div>

			<div class="weui-panel">
				<div class="weui-panel__hd">小程序调用Go的函数，每次点击增加次数。</div>
				<div class="weui-panel__bd">
					<div class="weui-media-box">
						点击了<span v-text="test_result1"></span>次
						<a href="javascript:" class="weui-btn weui-btn_primary marginTop10" v-on:click="btnRun1">点击1</a>
					</div>
				</div>
			</div>
			<div class="weui-panel">
				<div class="weui-panel__hd">小程序调用Go的函数，Go在等待2秒后回调小程序。</div>
				<div class="weui-panel__bd">
					<div class="weui-cells__group weui-cells__group_form weui-media-box">
						<div class="weui-cells__title">表单</div>
						<div class="weui-cells weui-cells_form">
							<label for="js_input1" class="weui-cell">
								<div class="weui-cell__hd"><span class="weui-label">输入内容</span></div>
								<div class="weui-cell__bd">
									<input id="js_input1" type="text" class="weui-input" v-model="inputText" />
								</div>
							</label>
							<label class="weui-cell">
								<div class="weui-cell__hd"><span class="weui-label">输出内容</span></div>
								<div class="weui-cell__bd">
									<div v-text="test_result2"></div>
								</div>
							</label>
							<div class="loading" v-show="isLoading">
								<i role="img" aria-label="加载中" class="weui-loading"></i> 请等待2秒
							</div>
							<a href="javascript:" class="weui-btn weui-btn_primary marginTop10"
								v-on:click="btnRun2">点击2</a>

						</div>

					</div>

				</div>
			</div>
		</div>
	</div>
	<script src="assets/vue.min.js"></script>
	<script src="assets/wasm_exec.js"></script>
	<script>
		const wasm_url = 'sample.wasm'
		var app = new Vue({
			el: '#app',
			data: {
				notice: '',
				inputText: '你好！Go语言。',
				test_result1: '0',
				test_result2: '',
				isLoading: false,
			},
			methods: {
				btnRun1() {
					var _that = this;
					var res = global.addTotal()
					_that.test_result1 = res

					console.log(res)
				},
				btnRun2() {
					var _that = this;
					_that.isLoading = true
					
					global.asyncAndCallbak(_that.inputText, function (res) {
						_that.isLoading = false
						_that.test_result2 = _that.test_result2 + res + ' '
						console.log(res)
					})
				},
				async initGo() {
					var _that = this;
					const go = new global.Go();
					try {
						const result = await WebAssembly.instantiateStreaming(fetch(wasm_url), go.importObject)
						var msg = 'Go初始化成功,在小程序调试窗口查看console的信息。'
						_that.notice = msg

						console.log('initGo', msg)

						// 运行go程序的main()方法
						await go.run(result.instance);
						// 注意：在go程序的main()方法退出之前，小程序不会运行到这个位置。
						console.log('initGo', '运行完成')
					} catch (err) {
						console.error('initGo', err)
					}
				},
			},
			mounted: async function () {
				// 在小程序基础类库的global对象上，增加console对象。
				global.console = console
				// 使用小程序类库的WXWebAssembly，初始化Go运行环境。
				await this.initGo()
			},
		});

	</script>
</body>

</html>